<template>
  <div style="width: 100%;" class="card-area">
    <!-- <a-card :bordered="false" :headStyle="headStyle" class="card-area-top">
      <p slot="title" class="card-title">查询</p> -->
    <layout-content topTitle="查询" bottomTitle="角色信息">
      <template v-slot:topCard>
        <!-- 搜索区域 -->
        <a-form layout="horizontal">
          <a-row>
            <a-col :md="6" :sm="24">
              <a-form-item label="角色名" :labelCol="{ span: 5 }" :wrapperCol="{ span: 18, offset: 1 }">
                <a-input size="small" v-model="queryParams.roleName" />
              </a-form-item>
            </a-col>
            <span style="float: left; margin-top: 8px;margin-left: 3rem">
              <a-button type="primary" @click="search">查询</a-button>
              <a-button @click="reset">重置</a-button>
            </span>
          </a-row>
        </a-form>
      </template>
      <template v-slot:extraOperation>
        <a-button v-hasPermission="'role:add'" type="primary" @click="add">
          <icon-font type="iconicon-test1" />新增
        </a-button>
      </template>
      <template v-slot:bottomCard>
        <div>
          <!-- 表格区域 -->
          <a-table
            ref="TableInfo"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="pagination"
            :loading="loading"
            :scroll="{ x: 900 }"
            @change="handleTableChange"
          >
            <template slot="remark" slot-scope="text, record">
              <a-popover placement="topLeft">
                <template slot="content">
                  <div style="max-width: 200px">{{ text }}</div>
                </template>
                <p style="width: 200px;margin-bottom: 0">{{ text }}</p>
              </a-popover>
            </template>
            <template slot="operation" slot-scope="text, record" >
              <div v-if="showEdit(record)">
              <icon-font
                v-hasPermission="'role:update'"
                type="iconbianji1"
                theme="twoTone"
                twoToneColor="#4a9ff5"
                @click="edit(record)"
                title="修改角色"
                class="icon"
              ></icon-font>
              &nbsp;<span class="border-span"></span>
              <icon-font
                type="iconshanchu1"
                theme="twoTone"
                twoToneColor="#42b983"
                @click="batchDelete(record)"
                title="删除"
                class="icon"
              ></icon-font>
              </div>
              <a-badge v-else
                       status="warning"
                       text="无权限"
              ></a-badge>
            </template>
          </a-table>
          <!-- 角色信息查看 -->
          <role-info @close="handleRoleInfoClose" :roleInfoVisiable="roleInfo.visiable" :roleInfoData="roleInfo.data">
          </role-info>
          <!-- 新增角色 -->
          <role-add @close="handleRoleAddClose" @success="handleRoleAddSuccess" :roleAddVisiable="roleAdd.visiable">
          </role-add>
          <!-- 修改角色 -->
          <role-edit
            ref="roleEdit"
            :roleInfoData="roleInfo.data"
            @close="handleRoleEditClose"
            @success="handleRoleEditSuccess"
            :roleEditVisiable="roleEdit.visiable"
          >
          </role-edit>
        </div>
        <!-- </a-card> -->
      </template>
    </layout-content>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import RangeDate from '@/components/datetime/RangeDate';
import RoleAdd from './RoleAdd';
import RoleInfo from './RoleInfo';
import RoleEdit from './RoleEdit';
import layoutContent from '@/components/tool/layout-content';

export default {
  name: 'Role',
  components: { RangeDate, RoleInfo, RoleAdd, RoleEdit, layoutContent },
  data() {
    return {
      headStyle: {
        borderBottom: 0,
        paddingLeft: 0,
        marginBottom: '-40px'
      },
      headStyleBottom: {
        borderBottom: 0,
        paddingLeft: 0,
        marginBottom: '-10px'
      },
      advanced: false,
      roleInfo: {
        visiable: false,
        data: {}
      },
      roleAdd: {
        visiable: false
      },
      roleEdit: {
        visiable: false
      },
      queryParams: {
        createTimeFrom: '',
        createTimeTo: ''
      },
      dataSource: [],
      sortedInfo: null,
      paginationInfo: null,
      selectedRowKeys: [],
      pagination: {
        size: 'small',
        pageSizeOptions: ['10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      loading: false
    };
  },
  computed: {
    ...mapState({
      user: state => state.account.user
    }),
    columns() {
      let { sortedInfo } = this;
      sortedInfo = sortedInfo || {};
      return [
        {
          title: '角色',
          align: 'center',
          dataIndex: 'roleName'
        },
        {
          title: '描述',
          dataIndex: 'remark',
          scopedSlots: { customRender: 'remark' },
          width: 350
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          sorter: true,
          sortOrder: sortedInfo.columnKey === 'createTime' && sortedInfo.order
        },
        {
          title: '修改时间',
          dataIndex: 'modifyTime',
          sorter: true,
          sortOrder: sortedInfo.columnKey === 'modifyTime' && sortedInfo.order
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
          align: 'center'
        }
      ];
    }
  },
  mounted() {
    this.fetch();
  },
  methods: {
      showEdit(user) {
        // if (this.user.roleCode === "admin"){
        //     return true;
        // }
        // if ("admin" === user.roleCode || "system" ===  user.roleCode  ) {
        //     return false;
        // }
        return true;
      },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    add() {
      this.roleAdd.visiable = true;
    },
    handleRoleAddClose() {
      this.roleAdd.visiable = false;
    },
    handleRoleAddSuccess() {
      this.roleAdd.visiable = false;
      this.$message.success('新增角色成功');
      this.search();
    },
    view(record) {
      this.roleInfo.data = record;
      this.roleInfo.visiable = true;
    },
    handleRoleInfoClose() {
      this.roleInfo.visiable = false;
    },
    edit(record) {
      this.$refs.roleEdit.setFormValues(record);
      this.roleInfo.data = record;
      this.roleEdit.visiable = true;
    },
    handleRoleEditSuccess() {
      this.roleEdit.visiable = false;
      this.$message.success('修改角色权限成功');
      this.search();
    },
    handleRoleEditClose() {
      this.roleEdit.visiable = false;
    },
    handleDateChange(value) {
      if (value) {
        this.queryParams.createTimeFrom = value[0];
        this.queryParams.createTimeTo = value[1];
      }
    },
    /**
     * @description: 接口是批量删除用户的，按设计稿没有批量选项，所以直接传单条参数进来，请求是发送单条数据的roleId即可
     * @param {type}
     * @return:
     * @logic:
     * @editor: youzi
     * @Date: 2019-08-12 11:12:32
     */
    batchDelete(record) {
      /* if (!this.selectedRowKeys.length) {
        this.$message.warning('请选择需要删除的记录');
        return;
      } */
      let that = this;
      this.$confirm({
        title: '确定删除吗?',
        content: '删除将不能恢复哦！',
        centered: true,
        onOk() {
          let roleIds = [];
          roleIds.push(record.roleId);
          /* for (let key of that.selectedRowKeys) {
            roleIds.push(that.dataSource[key].roleId);
          } */
          that.$delete('role/' + roleIds.join(',')).then(() => {
            that.$message.success('删除成功');
            that.selectedRowKeys = [];
            that.search();
          });
        },
        onCancel() {
          that.selectedRowKeys = [];
        }
      });
    },
    exprotExccel() {
      let { sortedInfo } = this;
      let sortField, sortOrder;
      // 获取当前列的排序和列的过滤规则
      if (sortedInfo) {
        sortField = sortedInfo.field;
        sortOrder = sortedInfo.order;
      }
      this.$export('role/excel', {
        sortField: sortField,
        sortOrder: sortOrder,
        ...this.queryParams
      });
    },
    search() {
      let { sortedInfo } = this;
      let sortField, sortOrder;
      // 获取当前列的排序和列的过滤规则
      if (sortedInfo) {
        sortField = sortedInfo.field;
        sortOrder = sortedInfo.order;
      }
      this.fetch({
        sortField: sortField,
        sortOrder: sortOrder,
        ...this.queryParams
      });
    },
    reset() {
      // 取消选中
      this.selectedRowKeys = [];
      // 重置分页
      this.$refs.TableInfo.pagination.current = this.pagination.defaultCurrent;
      if (this.paginationInfo) {
        this.paginationInfo.current = this.pagination.defaultCurrent;
        this.paginationInfo.pageSize = this.pagination.defaultPageSize;
      }
      // 重置列排序规则
      this.sortedInfo = null;
      // 重置查询参数
      this.queryParams = {};
      // 清空时间选择
      this.$refs.createTime.reset();
      this.fetch();
    },
    handleTableChange(pagination, filters, sorter) {
      // 将这两个参数赋值给Vue data，用于后续使用
      this.paginationInfo = pagination;
      this.sortedInfo = sorter;
      this.fetch({
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...this.queryParams
      });
    },
    fetch(params = {}) {
      this.loading = true;
      if (this.paginationInfo) {
        // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
        this.$refs.TableInfo.pagination.current = this.paginationInfo.current;
        this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize;
        params.pageSize = this.paginationInfo.pageSize;
        params.pageNum = this.paginationInfo.current;
      } else {
        // 如果分页信息为空，则设置为默认值
        params.pageSize = this.pagination.defaultPageSize;
        params.pageNum = this.pagination.defaultCurrent;
      }
      this.$get('role', {
        ...params
      }).then(r => {
        let data = r.data.data;
        const pagination = { ...this.pagination };
        pagination.total = data.total;
        this.dataSource = data.rows;
        this.pagination = pagination;
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="less" scoped>
/* @import '../../../../static/less/Common';
.card-area-bottom {
  margin-top: 1rem;
}
.card-area {
  .card-area-top,
  .card-area-bottom {
    border-radius: 6px;
  }
  .card-title {
    font-size: 1rem !important;
    font-weight: bold;
    color: #393d47;
    border-left: 4px solid #408bf4;
    padding-left: 15px;
  }
} */
.icon {
  svg {
    height: 20px;
    width: 20px;
  }
}
.card-area {
  button {
    width: 86px;
  }
}
.search-btn {
  margin-top: 8px;
}
.border-span {
  width: 2px;
  /* border: 1px solid rgb(207, 215, 222); */
  background-color: #cfd7de;
  height: 16px;
  margin-right: 2px;
  display: inline-block;
}
</style>
